<template>
	<view>
		<!-- <view class="flex-ac" @tap="handleOpenDate">
			<input type="text" v-model="innerValue" disabled class="flex1" :placeholder="placeholder" placeholder-class="plStyle" style="pointer-events: none;opacity: 0;" />
			<text class="showname bgfff" v-if="!disabled" :class="{'plStyle':!innerName}">{{innerName||placeholder}}</text>
			<text class="showname bgfff" v-else>{{innerName||'-'}}</text>
			<text class="gui-icons f40 c999" v-if="!disabled">&#xe661;</text>
		</view> -->
		<view class="flex-ac" @tap="handleOpenDate" style="position: relative;">
			<input type="text" v-model="innerValue" disabled class="flex1" :placeholder="placeholder" placeholder-class="plStyle" style="pointer-events: none;opacity: 0;" />
			<text class="showname bgfff" v-if="!disabled" :class="{'plStyle':!innerName}">{{innerName||placeholder}}</text>
			<text class="showname bgfff" v-else>{{innerName||'-'}}</text>
			<text class="gui-icons f40 c999" v-if="!disabled">&#xe661;</text>
		</view>
		<!-- &&isShowTrees -->
		<gui-tree v-if="list.length >= 1" :disabled="disabled" :color="color" :checkedId="checkedId" :trees="list" @taped="handleChange"
			type="radio"></gui-tree>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			list: {
				type: Array,
				default: () => []
			},
			keyname: {
				type: String,
				default: 'name'
			},
			valname: {
				type: String,
				default: 'val'
			},
			deptName:{
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			color:{
				type: String,
				default: '#2979ff'
			},
			
		},
		watch: {
			value(val) {
				this.setDefault()
			},
			deptName(val) {
				this.innerName = val
			},
		},
		data() {
			return {
				innerName: '',
				innerValue: '',
				checkedId: '',
				isShowTrees:false
			}
		},
		created() {
			this.setDefault()
		},
		methods: {
			handleOpenDate(){
				if(this.disabled) return;
				this.isShowTrees = !this.isShowTrees
			},
			setDefault() {
				if(!this.value||!this.list.length) return;
				this.innerValue =this.checkedId =  this.value
			},
			handleChange(e) {
				var node = this.getNode(e);
				console.log(e,node);
				this.checkedId = node.node.id;
				this.innerName = node.node.label
				this.innerValue = this.checkedId
				this.$emit('input', this.checkedId)
				this.$emit('change', this.checkedId)
			},
			// 利用 ids 获取节点信息
			getNodesByIds: function(nodes, res) {
				console.log('nodes',nodes,res);
				if (!res) {
					res = [];
				}
				for (let i = 0; i < nodes.length; i++) {
					if (this.isInArray(nodes[i].id, this.checkedIds)) {
						res.push(nodes[i]);
					}
					if (nodes[i].children) {
						this.getNodesByIds(nodes[i].children, res);
					}
				}
				return res;
			},
			isInArray: function(val, arr) {
				for (let i = 0; i < arr.length; i++) {
					if (val == arr[i]) {
						return true;
					}
				}
				return false;
			},
			// 记录或者反选
			pushIds: function(checkedId) {
				for (let i = 0; i < this.checkedIds.length; i++) {
					if (this.checkedIds[i] == checkedId) {
						this.checkedIds.splice(i, 1);
						return true;
					}
				}
				this.checkedIds.push(checkedId);
			},
			// 点击文本时获取节点信息
			getNode: function(e) {
				var len = e.length;
				var nodes = JSON.stringify(this.list);
				nodes = JSON.parse(nodes);
				var reLabels = [];
				var tmpVar = null;
				var thisNode = null;
				for (let i = 0; i < len; i++) {
					if (i == 0) {
						reLabels.push(nodes[e[i]].label);
						if (nodes[e[i]].children) {
							tmpVar = JSON.stringify(nodes[e[i]].children);
							tmpVar = JSON.parse(tmpVar);
						}
						thisNode = nodes[e[0]];
					} else {
						reLabels.push(tmpVar[e[i]].label);
						if (i + 1 >= len) {
							thisNode = tmpVar[e[i]];
						}
						tmpVar = tmpVar[e[i]].children;
					}
				}
				return {
					allLabels: reLabels,
					node: thisNode
				};
			}

		}
	}
</script>

<style scoped>
	.showname {
		position: absolute;
		left: 0;
		width: 450rpx;
		overflow: hidden;
	}
</style>